<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>插槽</title>
    </head>
    <div>

        <h3>插槽出口(slot outlet)和插槽内容(slot content)</h3>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>
        <script>

            const FancyButton = {
                template: `<button @click="handleClick">
                              <slot>
                                默认内容
                              </slot>
                           </button>`,
                methods: {
                    handleClick(evt) {
                        console.log( evt.target.innerHTML );
                    }
                }
            }

            const App = {
                components: {
                    FancyButton
                },
                template: `<div class="wrapper">
                              <FancyButton>点我试试</FancyButton>
                              <FancyButton>{{this.text}}</FancyButton>
                              <FancyButton />
                           </div>`,
                data() {
                    return {
                        text: 'Click Me'
                    }
                }
            }
            Vue.createApp(App).mount('#application');
        </script>
    </div>
</html>